import React, { useState, useRef } from "react";
import styles from './index.module.less'
import image from '@/common/image/flower.jpeg'
const magnifyingGlass = () => {
    const ref = useRef<HTMLImageElement>(null)
    const arr = []
    const obj = {}
    const str = ''
    console.log(Object.prototype.toString.call(arr));
    // Object.prototype.toString.call（arr）： [object Array]
    console.log(Object.prototype.toString.call(obj));
    console.log(Object.prototype.toString.call(str) === '[object String]');
    // 首字母大写
    console.log('string'.charAt(0).toUpperCase() + 'string'.slice(1));
    console.log('string'.charAt(0));
    
    // 变量 instanceof 类型   boolean
    console.log(arr instanceof Array);
    console.log(obj instanceof Object);
    // typeof 变量 boolean  基础数据类型
    console.log(typeof '');
    console.log(typeof 1);
    const [x, setX] = useState<number>(0)
    const [y, setY] = useState<number>(0)
    const mouseMove = (left, top) => {
        if(ref.current) {
            ref.current.style.display = 'block'
        }
        setX(left)
        setY(top)
    }
    const mouseLeave = () => {
        if(ref.current) {
            ref.current.style.display = 'none'
        }
    }
    return (
        <div className={styles.magnifyingGlass}>
            <div className={styles.magnifyingGlass__small}>
                <img src={image} alt="" onMouseMove={(e) => mouseMove(e.pageX,e.pageY)} onMouseLeave={mouseLeave} />
            </div>
            <div className={styles.magnifyingGlass__big} ref={ref}>
                <img src={image} alt="" style={{left: -x , top: -y}} />
            </div>
        </div>
    )
}

export default magnifyingGlass